// 左侧区域
.main-left {
    width: #{$left-width}px;
    height: calc(100vh - #{$head-height}px);
    position: fixed;
    background-color: $frame-left-bg;
    z-index: 999;
    box-shadow: 0 1px 4px -1px #c5c5c5 !important;

    .slimScrollDiv>* {
        overflow: hidden;
    }

    .slimScrollBar {
        background-color: rgba($white-color, 0) !important;
    }

    .menubar {
        font-size: 13.5px;
        list-style: none;
        margin: 0;
        padding: 0;

        >li {
            position: relative;
            display: block;

            >a {
                display: block;
                font-weight: normal;
                color: $frame-left-color;
                padding: 14px 20px 14px 25px;

                &:hover,
                &:active {
                    color: $frame-left-hover-color;
                }
            }

            &.selected {
                >a {
                    color: $frame-left-select-color;
                }
            }

            &.active {
                background-color: $frame-left-active-bg;

                >a {
                    color: $frame-left-active-color;
                }
            }
        }

        &.menubar-second {
            >li {
                >a {
                    color: $frame-left-color;
                    display: block;
                    font-size: 13px;
                    padding: 10px 15px 10px 52px;
                    font-weight: normal;

                    &:hover,
                    &:active {
                        color: $frame-left-hover-color;
                    }
                }


            }
        }

        &.menubar-third {
            li {
                a {
                    font-size: 13px;
                    font-weight: normal;
                    padding: 8px 15px 10px 62px;
                }
            }
        }

        &.menubar-forth {
            li {
                a {
                    font-size: 13px;
                    font-weight: normal;
                    padding: 8px 15px 10px 72px;
                }
            }
        }

        &.menubar-second,
        &.menubar-third,
        &.menubar-forth {
            >li {
                &.selected {
                    >a {
                        background-color: $frame-left-select-bg;
                        color: $frame-left-select-color;
                        border-right: 3px solid $frame-left-select-bdcolor;
                    }
                }
            }
        }

        .arrow {
            float: right;
            margin-top: 2px;
        }

        .fa.arrow:before {
            content: "\f105";
        }

        .active>a>.fa.arrow:before {
            content: "\f107";
        }
    }
}



// 迷你菜单模式页面布局
.mini-menu {

    .main-left {
        width: #{$mini-left-width}px;

        .sidebar-collapse {
            &.hovered {
                width: #{$left-width + 1}px !important;
            }

            >.menubar>li {
                width:#{$mini-left-width}px;

                &.hovered {
                    width: #{$left-width}px !important;
                }
            }
        }

        .menubar {
            li {
                border: none !important;
            }

            li a span {
                display: none;
            }

            >li.active {
                background-color: transparent;
            }

            li:hover>a>span.nav-label,
            li:hover .menubar-second {
                position: absolute;
                left: #{$mini-left-width + 1}px;
                display: block;
                min-width: #{$left-width - $mini-left-width}px;
            }

            li:hover>a>span.nav-label {
                top: 0px;
                text-align: center;
                background-color: $frame-left-bg;
                height: 100%;
                display: flex;
                align-items: center;
                justify-content: center;
                border-width: 1px 1px 0 1px;
                border-style: solid;
                border-color: $frame-left-mini-border-color;
            }

            li>.menubar-second {
                display: none;
                height: auto !important;
            }

            li:hover .menubar-second {
                font-size: 12px;
                background-color: mix($frame-left-bg, $white-color, 98%);
                border-width: 1px;
                border-style: solid;
                border-color: $frame-left-mini-border-color;

                .arrow {
                    display: inline-block;
                }
            }

            li .menubar-second li>a {
                padding: 10px 10px 10px 15px;
                font-size: 12px;
            }
        }
    }
}

&.menu-light {
    $frame-left-bg: $white-color; //左侧菜单默认背景颜色
    $frame-left-color: $body-text-color; //菜单默认文字颜色
    $frame-left-hover-color: $base-primary; //菜单默认文字激活颜色
    $frame-left-select-bg: mix($base-primary, $white-color, 10%); //激活菜单背景
    $frame-left-select-color: $base-primary; //激活菜单文字颜色
    $frame-left-select-bdcolor: darken($frame-left-select-bg, 40%); //激活菜单边框
    $frame-left-active-bg: $white-color; //激活菜单背景
    $frame-left-active-color: $frame-left-color; //激活菜单背景
    $frame-left-mini-border-color: #ddd;

    // 左侧区域
    .main-left {
        background-color: $frame-left-bg;

        .slimScrollBar {
            background-color: rgba($white-color, 0) !important;
        }

        .menubar {
            >li {
                >a {
                    color: $frame-left-color;

                    &:hover,
                    &:active {
                        color: $frame-left-hover-color;
                    }
                }

                &.selected {
                    >a {
                        color: $frame-left-select-color;
                    }
                }

                &.active {
                    background-color: $frame-left-active-bg;

                    >a {
                        color: $frame-left-active-color;
                    }
                }
            }

            &.menubar-second {
                >li {
                    >a {
                        color: $frame-left-color;

                        &:hover,
                        &:active {
                            color: $frame-left-hover-color;
                        }
                    }


                }
            }



            &.menubar-second,
            &.menubar-third,
            &.menubar-forth {
                >li {
                    &.selected {
                        >a {
                            background-color: $frame-left-select-bg;
                            color: $frame-left-select-color;
                            border-right: 3px solid $frame-left-select-bdcolor;
                        }
                    }
                }
            }
        }
    }

    // 迷你菜单模式页面布局
    &.mini-menu {
        .main-left {
            .menubar {
                li {
                    border: none !important;
                }

                >li.active {
                    background-color: transparent;
                }

                li:hover>a>span.nav-label {
                    background-color: $frame-left-bg;
                    border-color: $frame-left-mini-border-color;
                }

                li:hover .menubar-second {
                    background-color: mix($frame-left-bg, $white-color, 98%);
                    border-color: $frame-left-mini-border-color;
                }
            }
        }
    }
}